<template>
	<div>
		<div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">
			<div style="flex:1"></div>
			<div class="displayFlex" style="flex:2;justify-content: center;">
				<div class="date-item displayFlex">
					<span class="color888 mr10 font14">开始时间</span>
					<el-date-picker v-model="params.startTime" type="date" placeholder="开始时间" size="mini"
						value-format="yyyy-MM-dd" style="width: 130px;" @change="getData">
					</el-date-picker>
				</div>
				<div>
					<img src="@/assets/sIcon109.png" style="width: 20px;height: 6px;margin: 0 10px 5px;" />
				</div>
				<div class="date-item displayFlex">
					<span class="color888 mr10 font14">结束时间</span>
					<el-date-picker v-model="params.endTime" type="date" placeholder="结束时间" size="mini"
						value-format="yyyy-MM-dd" style="width: 130px;" @change="getData">
					</el-date-picker>
				</div>
			</div>

			<div style="flex:1;text-align:right">
				<el-select v-model="params.completeStatus" placeholder="台账完成状态" class="w130px mr20" @change="getData"
					clearable>
					<el-option label="全部制作" value="COMPLETE" />
					<el-option label="有未制作" value="INCOMPLETE" />
				</el-select>

				<el-select v-model="params.normalStatus" placeholder="状态" class="w120px" @change="getData" clearable>
					<el-option label="正常" value="NORMAL" />
					<el-option label="异常" value="ABNORMAL" />
				</el-select>
			</div>
		</div>

		<div class="bgfff mb20 bra8" style="display: flex;">
			<div style="height: 358px;width: 26%;">
				<div id="chart1" style="height:100%;width:320px;margin: 0 auto;"></div>
			</div>

			<div style="width: calc(74% - 20px);display: flex;" class="ml20">
				<div style="width: 33%;">
					<div style="color: #222;border-bottom: 1px solid#F0F0F0;padding: 20px 0;" class="font15">
						<span>{{params.startTime}}——{{params.endTime}}台账完成率</span>
					</div>

					<div style="height: 288px;width: 100%;">
						<div id="chart2" style="height: 288px;width: 320px;"></div>
					</div>
				</div>
				<div style="width: 67%;">
					<div style="color: #222;border-bottom: 1px solid#F0F0F0;width: 55%;padding: 20px 0;" class="font15 ml30">
						<span>处置设备设施异常问题</span>
					</div>

					<div class="displayFlexBet pl20">
						<div style="height: 288px;width: 50%;">
							<div id="chart3" style="height: 288px;width: 280px;"></div>
						</div>
						<div style="height: 288px;width: 50%;">
							<div id="chart4" style="height: 288px;width: 280px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-loading="loading">
			<div v-for="(item,index) in dataList" :key="index" class="pad10 bgfff bra8 mb10 point"
				@click="gotoDetail(item)" style="display: flex;">
				<div style="width: 320px;" class="mr20">
					<div class="color000 font15 pad20" style="border-bottom: 1px solid#F0F0F0;">
						{{item.outletName}}
					</div>
					<div class="pad20">
						<div class="font15 color555 mb20">排放时间</div>
						<div class="displayFlexBet mb50">
							<div class="displayFlex">
								<div style="width: 48px;line-height: 36px;border-radius: 12px;background: #E2F5FF;"
									class="textCenter">Day</div>
								<div class="ml10">
									<span style="color: #0B55A1;" class="font18">{{item.dischargeDay}}</span>
									<span class="font13 color555">天</span>
								</div>
							</div>

							<div class="displayFlex">
								<div style="width: 48px;line-height: 36px;border-radius: 12px;background: #E2F5FF;"
									class="textCenter">Hour</div>
								<div class="ml10">
									<span style="color: #0B55A1;" class="font18">{{item.dischargeHour}}</span>
									<span class="font13 color555">小时</span>
								</div>
							</div>
						</div>

						<div class="font15 color555 mb10">台账完成率</div>

						<div style="width: 253px;padding-bottom: 30px;">
							<div class="displayFlexBet font13 mb3" style="color: #BCBCBC;">
								<div>0%</div>
								<div>100%</div>
							</div>
							<div class="displayFlexBet" style="position: relative;">
								<div v-for="(item2,index2) in 20" class="mr5">
									<div v-if="index2 <=2"
										:style="{'background':(item.completePercent>(index2+1)*5)?'rgba(255, 58, 87, 1)':'rgba(255, 58, 87, 0.3)'}"
										style="width: 8px;height: 40px;border-radius: 2px;"></div>
									<div v-if="index2 >2 && index2<=9"
										:style="{'background':(item.completePercent>(index2+1)*5)?'rgba(255, 166, 39, 1)':'rgba(255, 166, 39, 0.3)'}"
										style="width: 8px;height: 40px;border-radius: 2px;"></div>
									<div v-if="index2>9"
										:style="{'background':(item.completePercent>=(index2+1)*5)?'rgba(72, 241, 243, 1)':'rgba(72, 241, 243, 0.3)'}"
										style="width: 8px;height: 40px;border-radius: 2px;"></div>
								</div>
								<div style="position: absolute;top:0;"
									:style="{'left':(item.completePercent>0?(item.completePercent - 2):0)+'%'}">
									<div style="width: 2px;height: 52px;background: #555555;"></div>
									<div style="color: #888;width: 60px;margin-left: -20px;">
										完成{{item.completePercent}}%</div>
								</div>

							</div>
						</div>
					</div>
				</div>
				<div
					style="width: calc(100% - 340px);white-space: nowrap;overflow-x: auto;overflow-y:hidden;margin-top: 60px;">
					<div style="width: 352px;display: inline-block;padding:20px 30px"
						v-for="(item2,index2) in item.defenceRunList" :key="index2" class="mr20"
						:style="{'background':index2 % 2 == 0?'#F6F7FB':'#FFF8C4'}">
						<div class="displayFlexBet" style="margin-bottom: 50px;">
							<div>
								<div style="margin-bottom:30px">{{item2.defenceName}}.运行时间</div>
								<div class="color555">
									<span style="font-size:30px">{{item2.runHour}}</span>
									<span class="font15">小时</span>
								</div>
							</div>
							<div>
								<el-progress type="circle" :percentage="item2.runPercent"
									:color="item2.runPercent<95?'#EF2845':'#8AD4F1'" :width="50" :stroke-width="4"
									:show-text="false" fillColor="#EF2845" fillColor2="#EEF3F6"></el-progress>
								<div class="mt5 textCenter font18" style="color: #60BADD;">{{item2.runPercent}}%</div>
							</div>
						</div>

						<div class="displayFlexBet">
							<div>
								<div class="font14 color888 mb20">异常小时工况</div>
								<div class="color333">
									<span class="font18 fontBold">{{item2.totalProblemNum}}</span>
									<span class="font13 ml5">次</span>
								</div>
							</div>
							<div v-if="item2.materialName">
								<div class="font14 color888 mb20 textCenter">{{item2.materialName}}</div>
								<div class="color333" style="text-align:right">
									<el-progress type="circle" :percentage="item2.materialLifePercent"
										:color="item2.materialLifePercent<20?'#EF2845':'#8AD4F1'" :width="50" :format="()=>{
										return (item2.materialLifePercent || 0)+'%'
									}" :stroke-width="4" fillColor="#EF2845" fillColor2="#EEF3F6"></el-progress>
								</div>
							</div>
						</div>
						<div class="mt30">
							<el-progress
								:percentage="item2.totalProblemNum == 0?0:(item2.remainProblem/item2.totalProblemNum)*100"
								:show-text="false" defineBackColor="#8AD4F1" color="#EF2845"></el-progress>
						</div>

					</div>
				</div>
			</div>
		</div>

		<el-empty v-if="dataList.length == 0"></el-empty>
	</div>
</template>

<script>
	import elProgress from '@/components/progress'
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		components: {
			elProgress
		},
		data() {
			return {
				params: {
					startTime: moment().startOf('month').format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					completeStatus: '',
					normalStatus: ''
				},
				dataList: [],
				dataList2: [],
				dataList3: [],
				dataList4: [],
				loading: true,
				screenWidth: 0,
				screenHeight: 0,
			}
		},

		mounted: function() {
			that = this
			window.addEventListener('resize', this.handleResize);
			this.handleResize();

			that.params.ticketId = that.$store.state.token
			that.getData()
		},

		destroyed() {
			window.removeEventListener('resize', this.handleResize);
		},

		methods: {

			handleResize() {
				this.screenWidth = window.innerWidth;
				this.screenHeight = window.innerHeight;
			},

			getData() {
				that.getOutletStdBookList()
				that.countOutletStdBook()
				that.countOutletProblem()
			},

			gotoDetail(item) {
				that.$router.push("/wasteGas/outletDetail?outletName=" + item.outletName + "&outletId=" + item.outletId +
					"&titleName=" + item.outletName)
			},

			countOutletProblem() {
				that.ajax({
					url: '/gasOutlet/countOutletProblem?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						let totalData = result.data.total

						that.dataList3 = totalData
						for (let item of totalData) {
							item.name = item.outletName
							item.value = item.num
						}
						if (totalData.length > 0) that.formPieChart2("chart3", totalData, '发生问题')

						let notCompleteData = result.data.notComplete
						console.log(notCompleteData)
						that.dataList4 = notCompleteData
						for (let item of notCompleteData) {
							item.name = item.outletName
							item.value = item.num
						}
						if (notCompleteData.length > 0) that.formPieChart2("chart4", notCompleteData, '未解决问题')

						console.log(totalData, notCompleteData)
					},
				})
			},

			countOutletStdBook() {
				that.ajax({
					url: '/gasOutlet/countOutletStdBook?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						let yearData = result.data.year
						let monthData = result.data.current
						that.formPieChart("chart1", [{
							"name": "应完成",
							"value": yearData.totalNum
						}, {
							"name": "未完成",
							"value": yearData.remainNum
						}], "全年台账已完成", true)

						that.formPieChart("chart2", [{
							"name": "应完成",
							"value": monthData.totalNum
						}, {
							"name": "未完成",
							"value": monthData.remainNum
						}], '本月已完成')
					},
				})
			},

			getOutletStdBookList() {
				that.loading = true
				that.ajax({
					url: '/gasOutlet/getOutletStdBookList?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
						that.loading = false
					},
				})
			},

			formPieChart2(chartId, dataList, title = "全年台账已完成", isBig = false) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;
				let total = 0
				for (let item of dataList) {
					total += item.value
				}

				option = {
					tooltip: {
						trigger: 'item'
					},
					title: {
						zlevel: 0,
						text: [
							'{value|' + title + '}\n' + total,
						].join('\n'),
						rich: {
							value: {
								color: '#303133',
								fontSize: 20,
								lineHeight: 40,
								align: "center" //对齐方式
							},
							name: {
								color: '#333',
								lineHeight: 20,
								align: "center" //对齐方式
							},
						},
						top: 'center',
						left: 'center',
						textAlign: 'center',
						textStyle: {
							rich: {
								value: {
									color: '#888',
									fontSize: 12,
									lineHeight: 40,
								},
							},
						},
					},
					legend: {
						type: 'scroll',
						orient: 'vertical',
						right: '-70',
						top: 'middle',
						icon: 'circle',
						formatter: function(name) { // 添加
							let total = 0
							let target
							for (let i = 0; i < dataList.length; i++) {
								total += dataList[i].value
								if (dataList[i].name === name) {
									target = dataList[i].value
								}
							}
							var arr = [
								'{a|' + name + '}\n' + '{c|' + target + '}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									color: '#888',
									fontSize: 12,
									width: 150
								},
								c: {
									fontSize: 16,
									color: '#333',
									lineHeight: 30
								}
							}
						}
					},
					color: ['#6204F1', '#D91749', '#FF7E00', '#FFDD00', '#f9c956', '#75bedc'],
					series: [{
						type: 'pie',
						radius: isBig ? ['45%', '70%'] : ['30%', '50%'],
						center: ['40%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						data: dataList
					}]
				};

				option && myChart.setOption(option);
			},

			formPieChart(chartId, dataList, title = "全年台账已完成", isBig = false) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'item'
					},
					title: {
						zlevel: 0,
						text: [
							'{value|' + title + '}\n' + (dataList[0].value - dataList[1].value),
						].join('\n'),
						rich: {
							value: {
								color: '#303133',
								fontSize: 20,
								lineHeight: 40,
							},
							name: {
								color: '#333',
								lineHeight: 20
							},
						},
						top: 'center',
						left: isBig ? '40%' : '38%',
						textAlign: 'center',
						textStyle: {
							rich: {
								value: {
									color: '#888',
									fontSize: 12,
									lineHeight: 40,
								},
							},
						},
					},
					legend: {
						type: 'scroll',
						orient: 'vertical',
						right: '-10px',
						top: 'middle',
						icon: 'circle',
						formatter: function(name) { // 添加
							let total = 0
							let target
							for (let i = 0; i < dataList.length; i++) {
								total += dataList[i].value
								if (dataList[i].name === name) {
									target = dataList[i].value
								}
							}
							var arr = [
								'{a|' + name + '}\n' + '{c|' + target + '}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									color: '#888',
									fontSize: 12,
									width: 110
								},
								c: {
									fontSize: 16,
									color: '#333',
									lineHeight: 30
								}
							}
						}
					},
					series: [{
						type: 'pie',
						radius: isBig ? ['43%', '70%'] : ['35%', '55%'],
						center: ['40%', '50%'],
						avoidLabelOverlap: false,
						itemStyle: {
							normal: {
								color: function(colors) {
									var colorList = [
										'#8DE5A8',
										'#5255C6',
									];
									return colorList[colors.dataIndex];
								}
							},
						},
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						data: dataList
					}]
				};

				option && myChart.setOption(option);
			},


		}
	}
</script>


<style scoped>
	.point:hover {
		background-color: #fafafa;
		/* 鼠标悬停颜色 */
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	>>>.el-progress-bar__inner {
		background-color: rgb(239, 40, 69) !important;
	}
</style>